<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<style>
			/* 每个div设置宽高：300px，倒角50%，设置字体：10em，垂直居中 */
		span{
			width: 300px;
			height: 300px;
			bord er: 1px solid red;
			border-radius: 50%;
			font-family: 微软雅黑;
			font-size: 10em;
			text-align: center;
			line-height: 300px;
			color: #fff;
			/* 盒子阴影：块级元素上 */
			/* 盒子阴影属性值：X  Y 模糊半径 扩散半径[可选]  颜色 内外阴影效果 */
			box-shadow: 5px 5px 100px 20px  #ffffff inset;
			/* 浮动属性 */
			float: left;
			float: right;
			fl oat: none;
		}
		   /* 每个div额外添加颜色 ：自定 */
		   .d1{
			   bor der: 1px solid red;
			   background-color: #aaffff;
		   }
		   .d2{
			   background-color: #00ffff;
		   }
		   .d3{
			   background-color: #aaaaff;
			   /* 清除浮动：clear属性：左浮模式:left */
			   clear: left;
		   }
		   .d4{
			   background-color: #00aaff;
			    /* 清除浮动：clear属性：左浮模式:left both两端浮动 效率低 */
			   clear: both;
		   }
		   .d5{
			   background-color: #aa55ff;
		   }
		</style>
	</head>
	<body>
		<!-- 什么是定位？将元素指定到页面某个特定的位置上
		 定位5种：①普通流定位【文档流定位】将元素按照块、行、行块特点排列
		         ②浮动定位：将元素飘起来，作用：左右布局
				 定义：让元素脱离文档流的一种定位方式
				      一旦浮动，转换为块元素
					  float浮动属性：left、right、none【定义浮动】
					  clear清除属性：left、right、both【清除浮动】
				 ③相对定位：相对于父级，按照body位置执行，占用文档流
				 ④绝对定位：相对于父级，按照页面左顶角执行，失去文档流
				 左栏弹出：相对定位+绝对定位实现【Jquery框架：页面的动态效果】
				 ⑤固定定位：将元素固定定位在页面指定位置
				 
		 -->
		 <!-- 浮动元素-->
		 <span class="d1">1</span>
		 <span class="d2">2</span>
		 <span class="d3">3</span>
		 <span class="d4">4</span>
		 <span class="d5">5</span>
		 
	</body>
</html>